<template>
    <el-container class="main-container">
        <el-header class="main-header">
            <div class="nav-bar">
            </div>
        </el-header>
        <div class="nav-anchor-container">
            <el-anchor class="nav-anchor-list" ref="anchorRef" :container="containerRef" direction="horizontal"
                @click="handleClick">
                <el-anchor-link :href="item.target" :title="item.name" v-for="(item, index) in anchorList">
                    {{ item.name }}
                </el-anchor-link>
            </el-anchor>
        </div>
    </el-container>
</template>

<script setup>
import { ref } from 'vue';
const anchorList = ref([
    {
        id: "1",
        name: "A模块",
        target: "modelA"
    },
    {
        id: "2",
        name: "B模块",
        target: "modelB"
    },
    {
        id: "3",
        name: "C模块",
        target: "modelC"
    },
    {
        id: "4",
        name: "D模块",
        target: "modelD"
    },
    {
        id: "5",
        name: "E模块",
        target: "modelE"
    },
    {
        id: "6",
        name: "F模块",
        target: "modelF"
    },
    {
        id: "7",
        name: "G模块",
        target: "modelG"
    }
])

const containerRef = ref();


</script>
<style>
.main-container {
    overflow-y: auto;
}
.main-header {
    padding: 0;
    width: 100%;
    position: fixed;
}

.nav-bar {
    background-color: rgb(0, 102, 204);
    height: 40px;
}

.nav-anchor-container {
    /* -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 10px 20%;
    position: sticky;
    top: 40px;
    background: #fff;
    z-index: 10;
    border-bottom: 1px solid #e6e6e6; */
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: flex;
    top: 40px;
    /* position: sticky;
    top: 40px; */

}

/* .main-content {
    height: 1000px;
    border-bottom: 1px solid #e6e6e6;
    overflow-y: hidden;

    div {
        width: 100%;
        height: 300px;
        border-bottom: 1px solid #e6e6e6;
        padding-top: 20px;
    }
} */
</style>